<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <!-- 引入jQuery和Bootstrap库 -->
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style type="text/css">
        /* 设置body填满整个屏幕并使用flexbox布局 */
        body {
            background-image: url("/images/xh.webp");
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center; /* 垂直居中 */
            align-items: center;     /* 水平居中 */
            font-family: 'Arial', sans-serif;
        }

        /* 时钟容器样式 */
        .clock-container {
            margin-bottom: 40px; /* 时钟与登录框之间的间距 */
            background-color: rgba(255, 255, 255, 0.5); /* 背景透明度调整 */
            border-radius: 20px;
            padding: 20px 40px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative; /* 为绝对定位的子元素准备 */
        }

        /* 时钟样式 */
        #clock {
            font-size: 80px; /* 增大时钟字体 */
            font-weight: bold;
            color: #ff6699;
            letter-spacing: 4px;
            text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
            animation: bounce 1s infinite; /* 添加跳动动画 */
        }

        /* 跳动动画效果 */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: scale(1); /* 原始大小 */
            }
            40% {
                transform: scale(1.2); /* 放大 */
            }
            60% {
                transform: scale(1.1); /* 轻微放大 */
            }
        }

        /* 登录框样式 */
        .login {
            width: 450px; /* 增加登录框宽度 */
            padding: 40px; /* 增加内边距 */
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            align-items: center; /* 水平居中 */
        }

        /* 标题样式 */
        h3 {
            color: #ff3399;
            font-family: 'Arial', sans-serif;
            margin-bottom: 30px;
            font-size: 28px; /* 增大标题字体 */
        }

        /* 表单样式 */
        .form-group label {
            color: #ff6699;
            font-weight: bold;
            font-size: 16px; /* 增大标签字体 */
        }

        .form-control {
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* 按钮样式 */
        .btn {
            width: 150px;
            border-radius: 10px; /* 增加按钮圆角 */
        }

        .btn-primary {
            background-color: #ff66b2;
            border: none;
        }

        .btn-primary:hover {
            background-color: #ff3385;
        }

        .btn-danger {
            background-color: #ff99cc;
            border: none;
        }

        .btn-danger:hover {
            background-color: #ff6699;
        }

        /* 密码显示隐藏图标 */
        .toggle-password {
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 40%;
            transform: translateY(-50%);
            color: #ff6699;
        }
    </style>
    <script>
        // 更新时钟显示函数
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const timeString = hours + ':' + minutes + ':' + seconds;
            document.getElementById('clock').textContent = timeString;
        }

        // 每秒更新一次时钟
        setInterval(updateClock, 1000);
        window.onload = updateClock;

        // 显示/隐藏密码功能
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const passwordToggle = document.getElementById('togglePassword');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordToggle.textContent = '👁️'; // 显示密码图标
            } else {
                passwordInput.type = 'password';
                passwordToggle.textContent = '👁️‍🔒'; // 隐藏密码图标
            }
        }
    </script>
</head>
<body>
<div class="clock-container">
    <div id="clock"></div> <!-- 时钟显示 -->
</div>
<div class="login">
    <h3>员工管理系统</h3>
    <form action="system?method=login" method="post">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="account" placeholder="用户名" required>
            <c:if test="${not empty errAccountMsg}">
                <small id="errAccountMsg" class="form-text" style="color: red;">
                        ${errAccountMsg}
                </small>
            </c:if>
        </div>
        <div class="form-group">
            <label>密码</label>
            <div style="position: relative; width: 100%;">
                <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
                <span id="togglePassword" class="toggle-password" onclick="togglePassword()">👁️‍🔒</span> <!-- 密码显示隐藏图标 -->
            </div>
            <c:if test="${not empty errPwdMsg}">
                <small id="errPwdMsg" class="form-text" style="color: red;">
                        ${errPwdMsg}
                </small>
            </c:if>
        </div>
        <div class="form-group" style="padding-top: 10px;">
            <button type="reset" class="btn btn-danger" style="float: left;">重置</button>
            <button type="submit" class="btn btn-primary" style="float: right;">登录</button>
        </div>
    </form>
</div>
</body>
</html>
